/**
 * 类组件中事件处理函数的this指向解决方法：
 *
 *  1. 在构造函数中提前bind
 *  2. 类的实例方法+箭头函数的方式
 *  3. 直接在使用的地方写成箭头函数
 */

import React from "react";
import ReactDOM from "react-dom/client";

class App extends React.Component {
  // 提供一个构造函数
  constructor(props) {
    super(props); // 调用父类的构造函数

    // 原型上的 handleClick 绑定好this指向之后，赋值给了 实例对象上的handleClick
    this.aaa = this.handleClick.bind(this);
  }

  // 必须提供 render 函数
  render() {
    // render 中的 this，是当前组件实例对象，react帮我们处理了的。

    return (
      <div>
        <h1>App</h1>
        {/* 一定注意，不要加括号。 */}
        <button onClick={this.aaa}>点我</button>

        <button onClick={this.fn1}>点我，直接写在类的实例上的方法</button>

        <button
          onClick={() => {
            console.log("a", this);

            this.fn2();
          }}
        >
          fn2
        </button>
      </div>
    );
  }

  // handleClick 函数，在当前类的原型对象上，可以通过 this.handleClick 调用
  handleClick() {
    console.log(this);
    console.log("handleClick");
  }

  // 实例上的
  fn1 = () => {
    console.log("fn1", this);
  };

  // 原型上的
  fn2() {
    console.log("fn2", this);
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(
  <React.Fragment>
    <App name="张三" age="18" />
  </React.Fragment>
);
